<template>
  <div class="RecordView_contanier app_container">
    <div class="logo"></div>
    <p v-if="activityName" class="act_title">{{ activityName }}</p>
    <div class="per_row">
      <input type="text" v-model="userName" maxlength="20" placeholder="请输入员工姓名" />
    </div>
    <div class="per_row">
      <input type="text" v-model="userPhone" maxlength="20" placeholder="请输入手机号" />
    </div>
    <div class="per_row">
      <input type="text" class="valiInput" v-model="valiCode" maxlength="4" placeholder="请输入验证码" />
      <img :src="valiCodeImg" class="valiCodeImg" />
      <button class="btn reflesh_btn" @click="fetchCaptcah" :disabled="fetching">刷新</button>
    </div>
    <div class="per_row">
      <button class="btn submit_btn" @click="handleSubmit" :disabled="fetching">提交</button>
    </div>
    <div class="bottom_tip">仅内部员工使用</div>
  </div>
</template>

<script>
import { getCaptcah, save } from '@/api'
import checker from '@/util/checker'
export default {
  name: 'RecordView',
  data() {
    return {
      userName: '',
      userPhone: '',
      valiCode: '',
      //
      valiCodeImg: '',
      activityName: sessionStorage.getItem('APP_ACTNAME') || '',
      //
      fetching: false
    }
  },
  watch: {
    valiCode(val) {
      this.valiCode = val.toUpperCase()
    }
  },
  methods: {
    async fetchCaptcah() {
      this.fetching = true
      try {
        const res = await getCaptcah()
        this.valiCodeImg = res.data
      } catch (error) {
        console.log(error)
      }
      this.fetching = false
    },
    async handleSubmit() {
      try {
        const rule = [
          {
            name: 'userName',
            checkType: 'notnull',
            errorMsg: '请输入员工姓名'
          },
          {
            name: 'userPhone',
            checkType: 'notnull',
            errorMsg: '请输入手机号'
          },
          {
            name: 'userPhone',
            checkType: 'phoneno',
            errorMsg: '手机号格式有误'
          },
          {
            name: 'valiCode',
            checkType: 'notnull',
            errorMsg: '请输入验证码'
          }
        ]

        const data = {
          userName: this.userName,
          userPhone: this.userPhone,
          valiCode: this.valiCode
        }

        if (!checker.check(data, rule)) {
          return this.$toast(checker.error)
        }
        this.fetching = true
        this.$_app_Loading.show()
        const res = await save(data)

        if (res.status === 200) {
          this.$toast(res.message)
          this.$router.replace({ name: 'PosterView', query: { token: sessionStorage.getItem('APP_TOKEN') } })
        }
      } catch (error) {
        console.log(error)
      }
      this.fetching = false
      this.$_app_Loading.hide()
      this.fetchCaptcah()
    }
  },
  mounted() {
    this.fetchCaptcah()
  }
}
</script>

<style lang="scss">
.RecordView_contanier {
  padding: 20px;

  .logo {
    margin: 0 auto;
    background-image: url('../assets/img/logo.png');
    background-repeat: no-repeat;
    background-size: cover;
    width: 110px;
    height: 70px;
  }

  .act_title {
    text-align: center;
    margin-top: 20px;
  }

  .per_row {
    display: flex;
    align-items: center;
    @include standardLRPadding(20px);
    height: 40px;
    margin-top: 20px;
    input {
      flex: 1;
      height: 100%;
      padding: 5px 10px;
      border: 1px solid #ccc;
    }

    .valiInput {
      flex: 2 1 auto;
      min-width: 0;
      border-right: 0 solid transparent;
    }

    .valiCodeImg {
      display: inline-block;
      flex: 1 1 auto;
      height: 100%;
      width: 100px;
      border-top: 1px solid #ccc;
      border-bottom: 1px solid #ccc;
    }

    .reflesh_btn {
      flex: 0 0 auto;
      height: 100%;
      line-height: 40px;
      border-bottom-left-radius: 0;
      border-top-left-radius: 0;
    }

    .submit_btn {
      flex: 1;
    }
  }

  .bottom_tip {
    text-align: center;
    font-size: 12px;
    color: $fc-sub;
    margin-top: 20px;
  }
}
</style>
